<template>
	<view class="searchList" :style="{paddingTop:padTop}">
		<view class="bigbox" :style="{position:pos}">
			<!-- 搜索区域 -->
			<!-- <view class="searchbox">
				<icon type="search"></icon>
				<input type="text" @confirm="search" v-model="key" />
			</view> -->
			<search-com :kkey="key" @myconfirm="search"></search-com>
			<!-- tab栏 -->
			<view class="tags">
				<view class="tag" @click="currentIndex = index" :class="{active:currentIndex === index}" v-for="(item,index) in tagsList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 商品区域 -->
		<view class="goods">
			<view class="good" @click="goGoodDetail(item.goods_id)" v-for="(item,index) in searchList" :key="index">
				<view class="img">
					<image :src="item.goods_small_logo" mode=""></image>
				</view>
				<view class="message">
					<text class="intro">{{item.goods_name}}</text>
					<view class="price">
						￥<text>{{item.goods_price}}</text>.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchCom from '../../components/SearchCom.vue'
	export default {
		components:{
			SearchCom
		},
		data(){
			return {
				key:'曲面电视',
				tagsList:['综合','销量','价格'],
				currentIndex:0,
				pagenum:1,
				pagesize:10,
				searchList:[],
				total:0,
				isRequest:false,
				padTop:0,
				pos:'static'
			}
		},
		onPageScroll(options) {
			if(options.scrollTop === 0){
				this.padTop = 0
				this.pos = 'static'
			}else{
				this.padTop = '200px'
				this.pos = 'fixed'
			}
		},
		onLoad(options) {
			this.key = options.key
			this.getSearchList()
		},
		onPullDownRefresh() {
			this.pagenum = 1
			this.pagesize = 10
			this.searchList = []
			this.getSearchList()
			setTimeout(()=>{
				uni.showToast({
					title:'刷新完毕'
				})
			},2000)
		},
		onReachBottom(){
			if(this.total<=this.searchList.length){
				uni.showToast({
					title:'没有更多数据了'
				})
				return
			}
			if(this.isRequest){
				return
			}
			this.pagenum += 1
			this.getSearchList()
		},
		methods:{
			async getSearchList(){
				this.isRequest = true
				uni.showLoading({
					title:'加载中'
				})
				const res = await this.$http({
					url:'/goods/search?query='+ this.key + '&pagenum=' + this.pagenum + '&pagesize=' + this.pagesize,
					method:'get'
				})
				console.log(res)
				this.searchList = [...this.searchList,...res.goods]
				this.total = res.total
				this.isRequest = false
				uni.hideLoading()
			},
			search(trankey){
				this.key = trankey
				this.pagenum = 1
				this.pagesize = 10
				this.searchList = []
				this.getSearchList()
			},
			goGoodDetail(id){
				uni.navigateTo({
					url:'/pages/goodDetail/goodDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="less">
	.searchList{
		.bigbox{
			left: 0;
			top: 0;
			width: 100%;
			height: 200rpx;
		}
		.searchbox{
			background-color: #eee;
			padding: 30rpx 16rpx;
			position: relative;
			icon{
				position: absolute;
				top: 50%;
				left: 30rpx;
				transform: translateY(-50%);
			}
			input{
				background-color: #FFFFFF;
				height: 60rpx;
				padding-left: 70rpx;
			}
		}
		.tags{
			display: flex;
			border-bottom: 1rpx solid #dddddd;
			background-color: #fff;
			.tag{
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				&.active{
					color: #eb4450;
				}
			}
		}
		.goods{
			padding: 0 20rpx;
			.good{
				display: flex;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #dddddd;
				.img image{
					width: 200rpx;
					height: 200rpx;
				}
				.message{
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.intro{
						font-size: 14px;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.price{
						color: #eb4450;
						text{
							font-size: 24px;
						}
					}
				}
			}
		}
	}
</style>
